<template>
	<view class="index_box box">
		<image src="../../static/bg@2x.png" mode="widthFix" class="big_img" style="width: 100%;"></image>
		<view class="top">
			<view class="box-bg" style="width: 96%;">
				<uni-nav-bar>
					<block slot="left">
						<view class="city" @click="gotoChoseCity">
							<view class="uni-nav-bar-text">
								{{ city||'定位中' }}
							</view>
							<uni-icons type="arrowdown" color="#fff" size="18" />
						</view>
					</block>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜索"
							@confirm="serchActiveByKeyWord" v-model="searchWords" />
					</view>
				</uni-nav-bar>
			</view>
		</view>
		<view class="index_container" style="z-index: 100000;">
			<view class="index_container_activity">
				<view class="index_container_activity_top">
					<view class="index_container_activity_top_left">
						<img class="middle_icon" src="../../static/home/embers.png" alt="" />
						<text class="hot">热门</text><text style="font-size: 32rpx;">活动</text>
					</view>
					<view class="" @click="serchActiveByKeyWord">
						查看更多<img class="mini_icon" src="../../static/home/2.png" alt="" />
					</view>
				</view>
				<view class="index_container_activity_container" @click="gotoActiveDetail(item.id)" v-if='havaHot'
					v-for="(item,index) in hotData" :key="index">
					<view class="index_container_activity_container_left">
						<img :src="item.image" alt="" style="width: 236rpx;height: 236rpx;" />
					</view>
					<view class="index_container_activity_container_right">
						<view class="index_container_activity_container_right_title">
							{{item.title || '暂无'}}
						</view>
						<view class="index_container_activity_container_right_desc">
							{{item.desc || '暂无'}}
						</view>
						<view class="index_container_activity_container_right_detail">
							<view class="index_container_activity_container_right_detail_icon">
								<image src="../../static/home/time.png" mode="" style="margin-right: 6rpx;"></image>
								<view class="index_container_activity_container_right_detail_text">
									{{hotStartTime[index] || '暂无'}}
								</view>
							</view>

							<view class="index_container_activity_container_right_detail_icon">
								<image src="../../static/home/flag.png" mode=""
									style="margin-left: 14rpx;margin-right: 6rpx;"></image>
								<view class="index_container_activity_container_right_detail_text">
									{{distanceArr[index]||'未知'}} 公里
								</view>
							</view>

						</view>
						<view class="index_container_activity_container_right_address">
							<view class="index_container_activity_container_right_detail_icon">
								<image src="../../static/home/address.png" mode="" style="margin-right: 6rpx;"></image>
							</view>
							<!-- <view class="">
								{{item.address || '暂无'}}
							</view> -->
							<view>
								<view class="ellipsis" v-if="item.address && item.address.length > 11">
									<!-- {{ item.address.slice(0, 16) + '...' }} -->
									{{ truncateText(item.address, 14) }}
								</view>
								<view v-else>
									{{ item.address || '暂无' }}
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="" v-else>
					暂时没有热门活动
				</view>
			</view>
			<view class="index_container_activity" style="padding-bottom: 100rpx;">
				<view class="index_container_activity_top">
					<view class="index_container_activity_top_left">
						<img class="middle_icon" src="../../static/home/collect.png" alt="" />
						<text class="hot" style="color: #FFA544;">精彩</text><text style="font-size: 32rpx;">回顾</text>
					</view>
					<view class="" @click="serchActiveByKeyWord">
						查看更多<img class="mini_icon" src="../../static/home/2.png" alt="" />
					</view>
				</view>
				<waterfallsFlow ref="waterfallsFlow" :list="wonderfulData" imageSrcKey="image" @image-click='clickImg'>
					<!--  #ifdef  MP-WEIXIN -->
					<view v-for="(item, index) of wonderfulData" :key="index" slot="slot{{index}}"
						@click="gotoActiveDetail(item.id)">
						<view class="cnt">
							<view class=" waterfall_title">
								<text class="value textOver">{{item.title||'暂无'}}</text>
							</view>
							<view class="waterfall_desc">
								<text class="value textOver">{{item.desc||'暂无'}}</text>
							</view>
							<view class="waterfall_address">
								<image src="../../static/address@2x.png" mode="" style="margin-right: 6rpx;     width: 28rpx;
								height: 28rpx;"></image>
								<text class="value textOver"
									style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:60%;">{{item.address||'暂无'}}</text>
							</view>
							<view class="waterfall_time ">
								<image src="../../static/time@2x.png" mode="" style="margin-right: 6rpx;     width: 28rpx;
								height: 28rpx;"></image>
								<text class="value textOver">{{timeArr[index]||'暂无'}}</text>
							</view>
						</view>
					</view>
					<!--  #endif -->

					<!-- #ifndef  MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="cnt">
							<view class=" waterfall_title">
								<text class="value textOver">{{item.title}}</text>
							</view>
							<view class="waterfall_desc">
								<text class="value textOver">{{item.desc}}</text>
							</view>
							<view class="waterfall_address">
								<text class="value textOver"
									style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:60%;">{{item.address}}</text>
							</view>
							<view class="waterfall_time ">
								<text class="value textOver">{{timeArr[idnex]}}</text>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</waterfallsFlow>
			</view>
		</view>
	</view>
</template>

<script>
	import distance from '@turf/distance';
	import {
		getLocationInfo
	} from "../../utils/location.js"
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import WebAPI from "../../api"
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		hotActive,
		showActive,
		getUserInfo,
		getUserCode,
		getUserDetails
	} from "../../api/request.js"
	import {
		timestampToDateTime
	} from "../../utils/time.js"
	export default {
		components: {
			waterfallsFlow
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: "数据加载中"
			})
			// this.$refs.waterfallsFlow.refresh();
			console.log('重新获取渲染列表');
			this.getCurrentLocation()
			this.gotoUserInfo()
			setTimeout(() => {
				uni.hideLoading()
			}, 2000)
			let that = this
			// this.list = data;

			uni.getStorage({
				key: 'token',
				success: async res => {
					// console.log(this, 'getUserInfo', this.userInfo);
					this.isLogin = true
					// let result = await getUserInfo(res.data)
					that.gethotActive();
					that.showActive();
					uni.hideLoading()
					this.getUserCodeMeth()
				},
				fail: async res => {
					that.gethotActive({
						pageNo: that.pageNo,
					});
					that.showActive();
					uni.hideLoading()
					this.getUserCodeMeth()
				}
			})
		},
		data() {
			return {
				list: [], // 瀑布流全部数据
				leftGap: 0,
				rightGap: 0,
				columnGap: 20,
				city: '定位中',
				searchValue: "",
				havaHot: false,
				choseActiveId: null,
				hotData: [],
				hotStartTime: [],
				wonderfulData: [],
				searchWords: null,
				timeArr: [],
				distanceArr: [],
				longitude: 0,
				latitude: 0,
			}
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		async onLoad() {
			await this.getCurrentLocation()
			this.gotoUserInfo()
			let that = this
			// this.list = data;

			uni.getStorage({
				key: 'token',
				success: async res => {
					// console.log(this, 'getUserInfo', this.userInfo);
					this.isLogin = true
					// let result = await getUserInfo(res.data)
					that.showActive();
					uni.hideLoading()
					this.getUserCodeMeth()
					that.gethotActive();
					let result = await getUserDetails(res.data)
				},
				fail: async res => {
					uni.showLoading({
						title: "数据加载中....",
					})
					setTimeout(() => {
						that.gethotActive({
							pageNo: that.pageNo,
						});
						that.showActive();
						uni.hideLoading()
						this.getUserCodeMeth()
						uni.getStorage({
							key: 'token',
							success: async res => {
								let result = await getUserDetails(res.data)
								uni.setStorage({
									key: "nickName",
									data: result.nickName
								})
								uni.setStorage({
									key: "phone",
									data: result.phone
								})
								uni.setStorage({
									key: "idCard",
									data: result.idCard
								})
							},
						})
					}, 2000)
				}
			})
		},
		async onShow() {
			const that = this
			uni.showTabBar()
			console.log('show');
			uni.getStorage({
				key: 'choseCtiy',
				success: function(res) {
					console.log(res.data);
					if (res.data.name.length > 2) {
						that.city = res.data.name
					} else {
						that.city = res.data.name.replace(/(.{1})/, '$1 ')
					}
					that.cityCode = res.data.code
				}
			});

		},
		methods: {
			shouldTruncate(text, maxLength) {
				let length = 0;
				for (let i = 0; i < text.length; i++) {
					if (this.isChinese(text[i]) || this.isEnglishLetter(text[i])) {
						length++;
					} else if (this.isNumber(text[i])) {
						length += 0.5; // 数字算半个单位长度
					}
				}
				return length > maxLength;
			},
			truncateText(text, maxLength) {
				let truncatedText = '';
				let length = 0;
				for (let i = 0; i < text.length; i++) {
					if (this.isChinese(text[i]) || this.isEnglishLetter(text[i])) {
						length++;
					} else if (this.isNumber(text[i])) {
						length += 0.5; // 数字算半个单位长度
					}
					truncatedText += text[i];
					if (length >= maxLength) {
						truncatedText += '...';
						break;
					}
				}
				return truncatedText;
			},
			isChinese(char) {
				return /^[\u4E00-\u9FA5]+$/.test(char);
			},
			isEnglishLetter(char) {
				return /^[a-zA-Z]+$/.test(char);
			},
			isNumber(char) {
				return /^[0-9]+$/.test(char);
			},
			async getUserCodeMeth() {
				let data = await getUserCode()
				uni.setStorage({
					key: "shareCode",
					data: data.data
				})
			},
			getCurrentLocation() {
				const that = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						that.longitude = res.longitude
						that.latitude = res.latitude
						console.log('地址', res);
						// that.city=res.
						getLocationInfo(res.longitude, res.latitude)
						setTimeout(() => {
							uni.getStorage({
								key: 'firstCtiyName',
								success: async function(res) {
									if (res.data.name.length > 2) {
										that.city = res.data.name
									} else {
										that.city = res.data.name.replace(/(.{1})/, '$1 ')
									}
									// that.city = res.data.replace(/(.{1})/, '$1 ')
									console.log('????', res);
								}
							});
						}, 200)
						that.hotData.map((item) => {
							console.log(that.latitude, item.longitude, that
								.longitude, that);
							if (item.latitude && that.latitude && item.longitude && that
								.longitude) {
								let from = [item.longitude, item.latitude];
								let to = [that.longitude, that.latitude];

								let options = {
									units: 'kilometers'
								};
								let dis = distance(from, to, options).toFixed(0);
								that.distanceArr.push(dis)
								console.log(dis, 'dis');
							}
						})
					},
					fail(e) {}
				});

			},
			gotoChoseCity() {
				uni.navigateTo({
					url: "../../subPackage/choseCity/choseCity"
				})
			},
			async serchActiveByKeyWord(e) {
				uni.reLaunch({
					url: "/pages/active/active?keyWords=" + this.searchWords,
					fail(e) {
						console.log(e);
					}
				})
			},
			clickImg(e) {
				uni.navigateTo({
					url: "/pages/eventDetails/eventDetails?id=" + e.id
				})
				console.log(e);
			},
			async gotoUserInfo() {
				const that = this
				uni.getStorage({
					key: 'token',
					success: async res => {
						// console.log(this, 'getUserInfo', this.userInfo);
						// this.isLogin = true
						// let result = await getUserInfo(res.data)
					},
					fail: async res => {
						this.isLogin = false
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								// 获取登录凭证
								var code = loginRes.code;
								uni.request({
									url: WebAPI.Login,
									method: 'POST',
									data: {
										jsCode: code,
										appId: "hdb01"
									},
									success: async function(res) {
										// 处理服务器端返回的数据
										uni.setStorage({
											key: 'token',
											data: res.data.data.token,
											success: function() {
												console.log('success');
											}
										});

									},
									fail: function(err) {
										console.error('请求失败', err);
									}
								});
							},
							fail: function(error) {
								console.error('登录失败', error);
							}
						});


					}
				});
			},
			async gethotActive(res) {
				const that = this
				console.log(res, 'hotActive');
				let data = await hotActive(res)
				console.log(data, 'dtatasd');
				if (data) {
					that.havaHot = true
					that.hotData = data

				}
				// that.hotData = data
				that.choseActiveId = data.id
				console.log(data, 'timestampToDateTime');
				data.map((item) => {
					that.hotStartTime.push(timestampToDateTime(item.startTime))
				})
				console.log(data);
			},
			async showActive(res) {
				console.log(res, 'showActive');
				let data = await showActive(res)
				console.log(data);
				this.wonderfulData = data
				if (data) {
					data.map((item) => {
						this.timeArr.push(timestampToDateTime(item.startTime))
					})
				}

			},
			finish() {

			},
			gotoActiveDetail(choseActiveId) {
				uni.navigateTo({
					url: "/pages/eventDetails/eventDetails?id=" + choseActiveId
				})
			},
			scrolltolower() {
				uni.showToast({
					icon: "none",
					title: "没有更多了"
				})
			},
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			// 模拟的后端数据
			getData() {

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {
				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {
				uni.showToast({
					title: '选择城市'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.index_container_activity_top_left {
		display: flex;
		align-items: center;
	}

	.uni-navbar__header-btns-left {
		width: 27% !important;
	}

	.uni-nav-bar-text {
		white-space: nowrap;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 135rpx;
		min-width: 114rpx;
	}

	image {
		border-radius: 16rpx;
	}

	.waterfalls-list-image {
		border-radius: 16rpx !important;
	}

	.content {
		padding: 10px;

		.cnt {
			padding: 10px;

			.title {
				font-size: 16px;
			}

			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}

	.waterfall-item__image image {
		border-radius: 12rpx;
		width: 312rpx !important;
	}

	.waterfall_title {
		height: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #1A0200;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
	}

	.waterfall_desc {
		height: 72rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #1A0200;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.waterfall_address {
		height: 34rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #4D4D4D;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.waterfall_time {
		height: 28rpx;
		font-family: DINAlternate, DINAlternate;
		font-weight: bold;
		font-size: 24rpx;
		color: #4D4D4D;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	$nav-height: 30px;

	.box-bg {
		padding: 5px 0;
		// margin-top: 94rpx; 
	}

	.uniui-search {
		color: #FA301B !important;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 28rpx;
	}

	.uni-navbar--border {
		background-color: transparent !important;
		border: 0rpx !important;
	}

	.uni-navbar__header {
		background-color: transparent !important;
	}

	.uni-navbar__header-container {
		background-color: white;
	}

	.uni-navbar__header-container {
		width: 324rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 20rpx;
	}

	.uni-navbar__header-btns {
		// width: 72rpx;
		// height: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: left;
		font-style: normal;
	}

	.index_box {
		width: 100vw;
		height: 100vh;
		min-height: 40vh;
		overflow: hidden;

		.top {
			min-height: 40vh;
			position: absolute;
			z-index: 10000;
			top: 94rpx;
			left: 42rpx;

			.big_img {
				position: absolute;
			}

			.top_container {
				margin-top: 66rpx;
				width: 100%;
				display: flex;
				position: absolute;
				z-index: 1000;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

				.index_address {
					width: 72rpx;
					height: 50rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #000000;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					margin-left: 40rpx;
					width: 14%;
					margin-top: 24rpx;
				}
			}
		}

		.index_container {
			width: 98%;
			padding: 10rpx;
			height: 100%;
			margin-top: -100rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: white;
			position: absolute;

			.index_container_activity {
				width: 92%;
				margin: auto;
				margin-top: 38rpx;

				.index_container_activity_top {
					display: flex;
					justify-content: space-between;
					margin-bottom: 42rpx;
				}

				.index_container_activity_container {
					display: flex;
					justify-content: space-between;
					margin-bottom: 42rpx;

					// flex-direction: column;
					.index_container_activity_container_right {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.index_container_activity_container_right_title {
							width: 360rpx;
							height: 42rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #1A0200;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
						}

						.index_container_activity_container_right_desc {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							overflow: hidden;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
							width: 416rpx;
							margin-bottom: 46rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #1A0200;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
						}

						.index_container_activity_container_right_detail {
							display: flex;
							margin-bottom: 10rpx;

							.index_container_activity_container_right_detail_icon {
								display: flex;
								flex: 1;

							}

							.index_container_activity_container_right_detail_icon image {
								width: 28rpx;
								height: 28rpx;
							}

							.index_container_activity_container_right_detail_text {
								// width: 172rpx;
								height: 28rpx;
								font-family: DINAlternate, DINAlternate;
								font-weight: bold;
								font-size: 24rpx;
								color: #4D4D4D;
								line-height: 28rpx;
								text-align: left;
								font-style: normal;
								white-space: nowrap;
							}
						}

						.index_container_activity_container_right_address {
							display: flex;

							>view {

								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #4D4D4D;
								line-height: 34rpx;
								text-align: left;
								font-style: normal;
							}

							.index_container_activity_container_right_detail_icon image {
								width: 28rpx;
								height: 28rpx;
							}

						}
					}
				}
			}
		}
	}

	.hot {
		// width: 128rpx;
		height: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FA2C17;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		margin-left: 10rpx;
		width: auto;
	}

	.middle_icon {
		width: 38rpx;
		height: 44rpx;
	}

	.mini_icon {
		width: 14rpx;
		height: 22rpx;
		margin-left: 12rpx;
	}
</style>